<template>
	<!-- 申请加盟 -->
	<view class="joinin_wp">
		<jyf-parser :html="info.content" :selectable="true"></jyf-parser>
		<view class="j_user_info">
			<view class="j_u_i_item">
				<view>联系人姓名</view>
				<input type="text" v-model="cname" placeholder="请输入联系人姓名" />
			</view>
			<view class="j_u_i_item">
				<view>联系人电话</view>
				<input type="text" v-model="mobile" placeholder="请输入联系方式" />
			</view>
			<view class="j_u_i_item">
				<view>代理区域</view>
				<input type="text" v-model="people" placeholder="请输入代理城市" />
			</view>
			<view class="j_u_i_item">
				<view>加盟等级</view>
				<picker @change="bindPickerChange" :value="index" :range="grade">
					<view :class="{'j_u_i_picker0':index===0}" class="j_u_i_picker">{{grade[index]}}</view>
				</picker>
			</view>
		</view>

		<view class="j_button" @click="onsubmit">提交</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
			jyfParser
		},
		data() {
			return {
				info: {},
				index: 0,
				people: '',
				mobile: '',
				cname: '',
				grade: ['请选择加盟等级', '县区代理商'],
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			onsubmit() {
				if (this.people == '' || this.mobile == '' || this.cname == '' || this.index == 0) {
					this.$api.msg('请补全提交信息！');
					return;
				}
				let obj = {
					people: this.people,
					mobile: this.mobile,
					cname: this.cname,
					grade: this.grade[this.index]
				}
				this.$axios('apply/main', 'POST', 'salemsg', obj).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('提交成功！');
					}
				})
			},
			getInfo() {
				this.$axios('index/msginfo', 'POST', 'salemsg', {
					id: 54
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data.info;
					}
				})
			},
			bindPickerChange(e) {
				this.index = e.target.value;
			}
		}
	}
</script>

<style lang="scss">
	.joinin_wp {
		color: $font-color-dark;
		padding: 20upx 20upx 130upx;
	}

	.j_user_info {
		padding: 20upx 0 60upx;
	}

	.j_u_i_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20upx;
	}

	.j_u_i_item input,
	.j_u_i_picker {
		color: $font-color-dark;
		text-align: right;
		font-size: 24upx;
	}

	.j_u_i_picker0 {
		color: #999999;
	}

	.j_button {
		background: linear-gradient(to right, #ff7101, #f03201);
		border-radius: 40upx;
		color: #fff;
		line-height: 70upx;
		letter-spacing: 2px;
		margin: 0 auto;
		text-align: center;
		width: 90%;
	}
</style>
